<template>
  <div class="repairs-detail">
    <head-top head-title="报修详情" goBack="true"></head-top>
    <section class="detail">
      <div class="top border-bottom">
        <img :src="list.head_pic || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg'" alt="">
        <span class="nick-name">{{list.nickname}}</span>
        <a :href="'tel:' + list.phone" class="tel">{{strPhone}}</a>
      </div>
      <desc-pic :list="list"></desc-pic>
      <div class="address_show">
        <span>地址：{{list.address}}</span>
        <span>阅读量：{{list.reading_amount}}</span>
      </div>
      <div class="pic">
        <div class="call">
          <a v-on:click="phoneCall(list.phone)">立即联系</a>
        </div>
      </div>
    </section>
    <div class="split"></div>
    <!--官方回复区-->
    <div class="reply" v-if="list.reply_content">
      <div class="reply_title"><span>官方回复区</span></div>
      <div class="reply_content">
        <div class="reply_text">{{list.reply_content}}</div>
        <div class="pic_img  clearfix">
          <!--微信浏览器-->
          <div v-if="weixinShow" v-for="(item,index) in list.reply_img" :key="index" class="img_li">
            <div class="img" v-lazy:background-image="item" @click="preview(index)"></div>
          </div>
          <!--普通浏览器-->
          <div v-if="ordinaryShow" class="img-box" v-for="(url, index) in list.reply_img"
               :style="{'background-image': 'url(' + url + ')'}"
               :key="index+'a'">
            <img preview="1" preview-text="" :src="url" alt="">
          </div>
        </div>
      </div>
    </div>
    <!--用户评价区-->
    <div class="reply" v-if="reviews.length!==0">
      <div class="reply_title"><span>用户评价区</span></div>
      <div class="assess_part">
        <div class="part_main">
          <div class="user_info">
            <img v-if="!list.head_pic" src="../../assets/default_label@2x.png" alt="">
            <img v-else :src="list.head_pic" alt="">
            <div class="info_content">
              <h3>{{list.nickname}}</h3>
              <p>{{reviews.created_at}}</p>
            </div>
          </div>
          <!--星级展示-->
          <ul class="star_show">
            <li>
              <span class="space">服务质量</span>
              <img v-for="n in reviews.service_quality" src="../../assets/starOn@2x.png" alt="">
            </li>
            <li>
              <span>结果满意度</span>
              <img v-for="n in reviews.result_star" src="../../assets/starOn@2x.png" alt="">
            </li>
          </ul>
          <!--意见类型反馈-->
          <div class="opinion_show">
            <div class="small_tips" v-for="(label,lindex) in otherLable" :key="lindex">{{label}}</div>
          </div>
          <div class="desc-pic">
            <div class="desc">
              {{reviews.content}}
            </div>
            <div class="pic_img  clearfix">
              <!--微信浏览器-->
              <div v-if="weixinShow" v-for="(item,index) in reviews.imgs" :key="index" class="img_li">
                <div class="img" v-lazy:background-image="item" @click="preview(index)"></div>
              </div>
              <!--普通浏览器-->
              <div v-if="ordinaryShow" class="img-box" v-for="(url, index) in reviews.imgs"
                   :style="{'background-image': 'url(' + url + ')'}"
                   :key="index+'a'">
                <img preview="1" preview-text="" :src="url" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<comment :list="list" :lists="lists" @passMethods="_getRepairsDetail"></comment>-->
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import comment from '../common/comment.vue'
  import descPic from '../common/desPic.vue'
  import { getRepairsDetail } from '../../api/publishList.js'
  import wx from 'weixin-js-sdk'
  import { IsWeiXin } from '../../common/js/isWeiXin'

  export default {
    data () {
      return {
        lists: [],
        list: {},
        reviews: {}, // 用户自己的评价数据
        otherLable: [], // 我的评价里的其他评价
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        },
        strPhone: '' // 省略电话号码
      }
    },
    created () {
      // 如果图片是异步生成，在图片数据更新后调用
      this.$previewRefresh()
      // 判断不同浏览器
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
    },
    mounted () {
      this._getRepairsDetail()
    },
    methods: {
      phoneCall: function (msg) {
        window.location.href = `tel://${msg}`
      },
      _getRepairsDetail () {
        getRepairsDetail(this.$route.params.id).then(res => {
          if (res.code === 200) {
            this.lists = res.data.comment
            this.list = res.data.repair
            this.reviews = res.data.reviews // 用户自己的评价展示数据
            // 转换评价内容里的其他评价内容为数组
            if (this.reviews.length !== 0) {
              const label = res.data.reviews.label
              this.otherLable = label.split(',')
            }
            // console.log(res.data.repair.phone)
            const phone = res.data.repair.phone
            // 将电话号码中间五位省略
            const phoneArr = [...phone]
            phoneArr.map((res, index) => {
              if (index > 2 && index < 8) {
                // console.log(res)
                this.strPhone += '*'
              } else {
                this.strPhone += res
              }
            })
            return this.strPhone
          }
        })
      },
      preview (index) {
        // if (this.ready) {
        wx.previewImage({
          current: this.reviews.imgs[index], // 当前显示图片的http链接
          urls: this.reviews.imgs // 需要预览的图片http链接列表
        })
        // }
      }
    },
    components: {
      headTop,
      comment,
      descPic
    }

  }
</script>

<style lang="scss">
  @import '../../common/sass/index.scss';

  .repairs-detail {
    background-color: #fff;
    width: 100%;
    .detail {
      padding-top: 40px;
      margin: 0 10px;
      margin-bottom: 10px;
      .top {
        height: 60px;
        line-height: 60px;
        img {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 10px;
        }
        .nick-name {
          font-size: 15px;
        }
        .tel {
          float: right;
          color: #0078de;
        }
      }
      .address_show {
        width: 100%;
        height: 20px;
        // border-top: 1px solid #f2f2f2;
        /*padding-top: 5px;*/
        span:first-child {
          line-height: 20px;
          padding-left: 10px;
          color: #666;
          float: left;
        }
        span:last-child {
          line-height: 20px;
          padding-left: 10px;
          color: #666;
          float: right;
        }
      }
      .pic {
        width: 100%;
        padding-top: 10px;
        .desc {
          line-height: 26px;
        }
        .pic_img {
          width: 100%;
          img {
            width: 24%;
          }
        }
        .time-answer {
          display: flex;
          justify-content: space-between;
          height: 32px;
          line-height: 32px;
          color: rgb(153, 153, 153);
          .answer {
            margin-top: 10px;
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: 12px 12px;
            background-repeat: no-repeat;
            @include bgimg('../message/images/pinglun')
          }
        }
        .call {
          width: 100%;
          height: 38px;
          font-size: 15px;
          line-height: 38px;
          text-align: center;
          color: #ffffff;
          background-color: #0078de;
          a {
            display: inline-block;
            width: 100%;
            height: 38px;
          }
        }
      }
    }
    .split {
      height: 10px;
      background-color: #f2f2f2;
    }
    .reply{
      border-bottom: 10px solid #f2f2f2;
      .reply_title{
        border-bottom: 1px solid #f1f1f1;
        padding: 15px 10px;
        background: url("./images/reply_bg@2x.png") no-repeat;
        /*width: 100%;*/
        background-size: 100px;
        span{
          font-size: 15px;
          color: #333333;
          font-weight: bolder;
        }
      }
      .reply_content{
        padding: 10px;
        .reply_text{
          line-height: 16px;
          color: #292929;
          font-size: 13px;
        }
        .pic_img {
          width: 100%;
          margin-top: 7px;
          /*微信浏览器的图片预览的样式*/
          .img_li {
            width: 24%;
            height: 80px;
            margin-top: 1%;
            float: left;
            margin-left: 1%;
            background: #f2f2f2;
            .img {
              width: 100%;
              height: 100%;
              background-size: cover;
            }
          }
          /*普通浏览器的图片预览的样式*/
          .img-box {
            float: left;
            /*width: 30%;*/
            padding: 11%;
            margin: 0.65%;
            position: relative;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            img {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              opacity: 0;
            }
          }
        }
      }
      .assess_part{
        padding: 10px;
        .part_main{
          .user_info{
            display: inline-flex;
            align-items: center;
            img{
              width: 40px;
              height: 40px;
              border-radius: 50px;
            }
            .info_content{
              margin-left: 10px;
              h2{
                font-size: 14px;
                color: #333333;
              }
              p{
                font-size: 12px;
                color: #999999;
                margin-top: 10px;
              }
            }
          }
          .star_show{
            padding: 10px 0;
            li{
              display: inline-flex;
              align-items: center;
              width: 100%;
              margin-top: 10px;
              span{
                font-size: 14px;
                color: #333333;
                margin-right: 10px;
              }
              .space{
                letter-spacing: 4px;
              }
              img{
                width: 14px;
                height: 14px;
                margin-left: 5px;
              }
            }
          }
          .opinion_show{
            /*padding: 10px 0;*/
            display: inline-flex;
            .small_tips{
              font-size: 12px;
              color: #EB7054;
              background: #FFE9E5;
              border-radius: 20px;
              padding: 5px 10px;
              margin-left: 10px;
            }
            .small_tips:first-child{
              margin-left: 0;
            }
          }
          .desc-pic {
            /*padding: 10px;*/
            margin-top: 10px;
            .desc {
              line-height: 16px;
              color: #333333;
              font-size: 14px;
            }
            .pic_img {
              width: 100%;
              margin-top: 7px;
              /*微信浏览器的图片预览的样式*/
              .img_li {
                width: 24%;
                height: 80px;
                margin-top: 1%;
                float: left;
                margin-left: 1%;
                background: #f2f2f2;
                .img {
                  width: 100%;
                  height: 100%;
                  background-size: cover;
                }
              }
              /*普通浏览器的图片预览的样式*/
              .img-box {
                float: left;
                /*width: 30%;*/
                padding: 11%;
                margin: 0.65%;
                position: relative;
                overflow: hidden;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                img {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  opacity: 0;
                }
              }
            }
          }
        }
      }
    }
    .reply:last-child{
      border-bottom: none;
    }
  }
</style>
